<template>
  <div class="app">
    <!-- 
      后期在父子组件通信中使用v-model语法糖:
      1) 父组件通过value属性传值给子组件
      2) 子组件通过发射input自定义事件让父组件改值
     -->
    父组件 --- 子组件中选中的城市是: {{ cityId }}
    <!-- v-model 等价于 :value + @input -->
    <!-- <BaseSelect :value="cityId" @input="cityId = $event"></BaseSelect> -->
    <BaseSelect v-model="cityId"></BaseSelect>
  </div>
</template>

<script>
import BaseSelect from "./components/BaseSelect.vue";
export default {
  data() {
    return {
      cityId: "102",
    };
  },
  components: {
    BaseSelect,
  },
};
</script>

<style>
.app {
  border: 3px solid red;
  width: 400px;
  height: 200px;
}
</style>